<template>
    <div>
        <el-row>
            <!-- 班级列表信息 -->
            <el-col :span="5">
                <h2 style="text-align: center;">班级列表</h2>
                <!-- 列表数据展示 ，label控制要展示的字段数据-->
                <el-tree :data="classesList" :props="{
                    label: 'className',
                }"
                 highlight-current="true"
                @node-click="handleNodeClick"
                ref="classRef"
                node-key="classId"></el-tree>
            </el-col>

            <!-- 学生信息 -->
            <el-col :span="18" :offset="1">
                <!-- 信息查询 -->
                <el-form :model="queryForm" inline size="mini">
                    <el-form-item label="学号" prop="stuNum">
                        <el-input v-model="queryForm.stuNum"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="stuName">
                        <el-input v-model="queryForm.stuName"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phoneNum">
                        <el-input v-model="queryForm.phoneNum"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary">查询</el-button>
                        <el-button type="info">重置</el-button>
                    </el-form-item>
                </el-form>

                <!-- 添加 -->
                <el-row>
                    <el-button type="primary" icon="el-icon-plus" size="mini">添加</el-button>
                </el-row>

                <!-- 表格 -->
                <el-table :data="studentList" style="width:100%">
                    <el-table-column type="index" label="#"></el-table-column>
                    <el-table-column prop="stuNum" label="学号" align="center" width="80" show-overflow-tooltip
                        fixed></el-table-column>
                    <el-table-column prop="stuName" label="姓名" align="center" width="80" fixed show-overflow-tooltip></el-table-column>
                    <el-table-column prop="majorInfo.majorName" label="专业" align="center" width="110"
                        show-overflow-tooltip></el-table-column>
                    <el-table-column prop="phone" label="手机" align="center" width="110" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="age" label="年龄" align="center" width="50"></el-table-column>
                    <el-table-column prop="sex" label="性别" align="center" width="50">
                        <template #default="{ row }">
                            {{ getSexLabel(row.sex) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" align="center" width="160"
                        show-overflow-tooltip></el-table-column>
                    <el-table-column prop="updateTime" label="修改时间" align="center" width="160"
                        show-overflow-tooltip></el-table-column>
                    <el-table-column label="操作" align="center" fixed="right">
                        <template #default="{ row }">
                            <el-button type="text" icon="el-icon-edit">编辑</el-button>
                            <el-button type="text" icon="el-icon-delete">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页组件 -->
                <el-row type="flex" justify="center">
                    <!-- .sync类似v-model，实现页面数据双向响应式 -->
                    <el-pagination layout="prev, pager, next" :total="pageIniation.total" :page-size="pageIniation.pageSize" :current-page.sync="pageIniation.pageNum" @current-change="getListStudent">
                    </el-pagination>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { listClasses } from '@/api/classes.js';
import { listStudent } from '@/api/student.js';
import { listDict } from '@/api/common.js';
export default {
    name: "",
    data() {
        return {
            //班级列表
            classesList: [
                {
                    name: "一级1"
                },
                {
                    name: "一级2"
                }
            ],
            //当前班级信息
            curClass: {},

            //学生信息查询
            queryForm: {
                stuNum: undefined,
                stuName: undefined,
                phoneNum: undefined,
            },

            //学生信息列表
            studentList: [
                {
                    stuNum: "1111",
                    stuName: "张三",
                    major: "计科",
                    phone: "123456",
                    age: 18,
                    sex: '0',
                    createTime: "09888",
                    updateTime: "097777",
                },

                {
                    stuNum: "1111",
                    stuName: "张三",
                    major: "计科",
                    phoneNum: "123456",
                    age: 18,
                    sex: '0',
                    createTime: "09888",
                    updateTime: "097777",
                },
            ],

            //性别列表
            sexDictList: [],

            //分页
            pageIniation: {
                pageNum: 1,
                pageSize: 3,//控制每一页显示多少条数据
                total:0,
            }

        }
    },

    computed: {
        //获取性别
        getSexLabel() {
            return (sexCode) => {
                const { dictLabel } = this.sexDictList.find(item => item.dictValue === sexCode) || {}
                return dictLabel || "未知"
            }
        }
    },

    created() {
        this.getListClasses()
        this.getListDict()

    },
    methods: {
        //获取班级列表信息
        getListClasses() {
            listClasses().then(res => {
                console.log(res);
                this.classesList = res.data

                if (res.data.length > 0) {
                    //获取到第一个班级信息
                    this.curClass = res.data[0]

                    //默认第一条实现高亮
                    //类似jq的入口函数，等dom更新完之后立马执行回调函数
                    this.$nextTick(()=>{
                        this.$refs["classRef"].setCurrentKey(res.data[0].classId)
                    })

                    //学生信息依赖班级信息的接口，所以在获取班级列表里获取学生信息
                    this.getListStudent()
                }


            })
        },

        //获取学生信息
        getListStudent() {
            const { classId } = this.curClass
            //过滤掉多余的参数
            const {total,...rest}=this.pageIniation
            listStudent({ ...rest, classId }).then(res => {
                console.log(res);
                this.studentList = res.data.rows
                this.pageIniation.total=res.data.count
            })
        },

        //获取性别列表
        getListDict() {
            listDict("sys_user_sex").then(res => {
                console.log(res);
                this.sexDictList = res.data

            })
        },

        //点击班级列表时，更新学生列表
        handleNodeClick(data, node) {
            console.log(data);
            console.log(node);

            //获取点击的当前班级信息
            this.curClass=JSON.parse(JSON.stringify(data))

            //更新学生信息，再调用一次接口
            this.getListStudent()

        }

    },
}
</script>

<style lang="scss" scoped></style>